<template>
	<view class="address">
		<view class="content">
			<view class="title">修改接单地址</view>
			<view class="maxlength">详细到具体的门牌号，接单地址会影响服务费用，请仔细填写。</view>
			<view class="shooseAddress" @tap="openMap">
				<view class="distinguish">{{infoAddress.join('')}}</view>
				<image class="address_icon" :src="'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-92.png'" mode=""></image>
				<!-- <view class="value">
					<uni-icons type="down" size="16"></uni-icons>
					<picker mode="region" @change="bindRegionChange" value="{{infoAddress}}" custom-item="">
						<view class="picker"></view>
					</picker>
				</view> -->
			</view>
			<textarea v-model="addressVal" placeholder-style="color:#CACCCC" maxlength="50" class="inputBox" placeholder="填写详细地址，如门牌号，楼栋信息" />
			<view class="title" style="margin: 20rpx 0;">修改服务范围</view>
			<view class="orderAddress">
				<input v-model="orderTakingRange"
				placeholder-style="color:#CACCCC" 
				maxlength="2" 
				min="1"
				max="99"
				style="margin-top: 8rpx;height: 96rpx;padding: 0;"
				class="inputBox"
				type="number"
				placeholder="填写服务范围" />KM
			</view>
		</view>
		<view class="btn" @click="edit">确认修改</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref,toRaw } from 'vue'
	import { onLoad ,onShow} from '@dcloudio/uni-app'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore' 
	import config from '@/config'
	const { userInfo } = useUserStoreToRefs()
	const addressVal = ref('')
	const infoAddress = ref([])
	const location = ref([])
	const orderTakingRange = ref('')
	const province= ref('')
	const city= ref('')
	const area= ref('')
	onLoad(() => {
		let info = userInfo.value
		// infoAddress.value = [info.province,info.city,info.area]
		province.value = info.province
		city.value = info.city
		area.value = info.area
		infoAddress.value = [info.locationAddress]
		addressVal.value = info.address
		location.value = info.latitudeLongitude
		orderTakingRange.value = info.orderTakingRange
	})
	onShow(() => {
		uni.$once('commitCheck', (data) => {
			console.log(data)
			infoAddress.value = [data.province,data.city, data.district,data.name,data.address]
			location.value = data.location
			province.value = data.province
			city.value = data.city
			area.value = data.district
		});
	})
	const bindRegionChange = (e) => {
		// console.log(e.detail.value)
		infoAddress.value = e.detail.value
	}
	
	const openMap = () => {
		uni.navigateTo({
			url: '/pages/map/index/index'
		})
	}
	
	const getLocation = (address)=> {
      return new Promise((resolve, reject) => {
        uni.request({
          url: config.mapUrl, //腾讯官方逆解析接口，可直接复制
          data: {
            address,
            key: config.mapKey, //自己申请的Key
            output: "jsonp",
          },
          method: "GET",
          success(json:any) {
            if (json.data.status == 1) {
				location.value = json.data.geocodes[0].location
              resolve(json);
            } else {
				uni.showToast({
					title: '获取该位置经纬度失败,请重试',
					icon: 'none'
				});
              reject();
            }
          },
          fail: (res) => {
			  uni.showToast({
			  	title: '获取该位置经纬度失败,请重试',
			  	icon: 'none'
			  });
            reject();
          },
        });
      });
    }
	
	const editOrderTakingRange = ()=> {
      return new Promise(async(resolve, reject) => {
        const res = await api({
           method: 'put',
           url: `/mall//user/v2/updateAcceptRange`,
		   data:{
		   	 orderTakingRange:orderTakingRange.value
		   }
        })
		if(res.code != 0){
			reject(false)
		}
		resolve(res)
      });
    }
	
	const edit = async() => {
		if (!infoAddress.value || infoAddress.value.length == 0) {
			uni.showToast({
				title: '请选择地址',
				icon: 'none'
			});
			return false
		}
		if (!addressVal.value || addressVal.value.trim().length <= 0) {
			uni.showToast({
				title: '请填写详细地址',
				icon: 'none'
			});
			return false
		}
		if (!orderTakingRange.value || orderTakingRange.value == '0' || String(orderTakingRange.value).trim().length <= 0) {
			uni.showToast({
				title: '请填写服务范围',
				icon: 'none'
			});
			return false
		}
		// let str = infoAddress.value.join('') +  addressVal.value
		// await getLocation(str)
		await editOrderTakingRange()
		let res:any = await api({
		  method: 'put',
		  url: `/mall//user/v2/updateAcceptAddress`,
		  data:{
			  province:province.value,
			  city:city.value,
			  area:area.value,
			  address:addressVal.value,
			  latitudeLongitude:location.value,
			  locationAddress:infoAddress.value.join('')
		  }
		})
		if (res.code !== 0) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			})
			return false
		}else{
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.orderAddress{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #F9F6F6;
	font-size: 30rpx;
	margin-top: 8rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
}
.address{
	height: 100vh;
	background-color: #F9F6F6;
	padding: 32rpx;
	box-sizing: border-box;
	.content{
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		.title{
			font-weight: bold;
			color: #1A1A1A;
			font-size: 32rpx;
		}
		.maxlength{
			color: #7C807F;
			font-size: 28rpx;
			margin: 16rpx 0 40rpx;
			line-height: 40rpx;
		}
		.shooseAddress{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #F9F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// height: 96rpx;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			.distinguish{
				font-size: 30rpx;
				color: #1B2120;
				width: calc(100% - 32rpx);
				// width: 70%;
			}
			.address_icon {
				width: 32rpx;
				height: 32rpx;
			}
			.value{
				position: relative;
				.picker{
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					width: 120rpx;
					height: 40rpx;
				}
			}
			
		}
		.inputBox{
			background: #F9F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			height: 176rpx;
			padding: 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #1B2120;
			width: 100%;
		}
	}
	.btn{
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		letter-spacing: 2rpx;
		margin-top: 24rpx;
	}
}	
</style>